<template>
  <section class="cart">
    <vheader title="购物车">
      <span class="c" slot="c">
        ({{getCartCount}})
      </span>
      <section slot="right">
        <span @click="onShow()">
          编辑全部
        </span>
      </section>
    </vheader>
   <main class="cart-main">
      <shop v-for="(cartItem,cartIndex) in shopCart"
      :shop="cartItem"
      :showEdit="showEdit"
      :shopCart="shopCart"
      :cartIndex="cartIndex"
      :key="cartIndex"></shop>
   </main>
    <install></install>
    <vfoot></vfoot>
  </section>
</template>
<script>
import header from "../../components/header/header";
import shop from "./shop/shop";
import foot from "../../components/foot/foot";
import install from "./intall/intall";
import {mapState,mapGetters} from "vuex";
export default {
  name: "cart",
  components: {
    vheader: header,
    shop,
    install,
    vfoot: foot
  },
  data(){
    return {
      showEdit:false,
    }
  },
  created(){
    console.log(this.shopCart)
  },
 computed:{
   ...mapState({
     shopCart:state=>state.shopCart
   }),
   ...mapGetters(['getCartCount'])
 },
  
  
  methods: {
    onShow:function(){
      if(this.showEdit==false){
        this.showEdit=true;
      }else{
        this.showEdit=false;
      }
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.c{
  font-size: px2rem(26);
  color: $basic-color;
}
.cart-main{
   width: 100%;
   border-top: 2px solid #dedede;
}

</style>